<template>
  <div class="frame-top relative" :class="{'blue': theme}">
    <div class="pc-width nav-flex">
      <span>欢迎光临上海市安装行业协会官方网站</span>
      <div class="avtra" v-if="!userName">
        <a-avatar>
          <a-icon slot="icon" type="user" />
        </a-avatar>
        <span @click="login" class="login cursor">登录</span>
      </div>
      <div class="avtra" v-else>
        <a-avatar>
          <a-icon slot="icon" type="user" />
        </a-avatar>
        <a-dropdown  class="login">
          <span @click="e => e.preventDefault()">{{userName}}<a-icon type="down" /></span>
          <a-menu slot="overlay">
            <a-menu-item @click="loginout">退出</a-menu-item>
          </a-menu>
        </a-dropdown>
      </div>
    </div>
  </div>
</template>

<script>
import { tracker } from 'lib/analytics'
export default {
  name: "headBar",
  computed: {
    theme () {
      return this.$route.fullPath.includes("home") || this.$route.fullPath.includes("installer") || this.$route.fullPath.includes("serve")
    }
  },
  data () {
    return {
      userName: ''
    }
  },
  components: {
  },
  mounted () {
  },
  created () {
    this.userName = localStorage.getItem('userName')
  },
  methods: {
    loginout () {
      this.$http.logout().then((res) => {
        this.userName = ''
        localStorage.removeItem('userName')
        this.$router.push({ path: '/login' })
        tracker.deleteToken()
        tracker.deleteRoles()
      }).catch(e => {})
    },
    login () {
      this.$router.push({ path: '/login' })
    }
  }
}

</script>

<style lang="scss">
</style>
